<template>
  <div>
    <!-- 块图 -->
    <el-card class="squareChart">
      <div ref="squareChart">
        <div><span>今日生产情况</span></div>
        <div class="squareItem">
          <span>生产工单数</span>
          <span>{{ squareOption.productionWork }}</span>
        </div>
        <div class="squareItem">
          <span>完工工单数</span>
          <span>{{ squareOption.finishWork }}</span>
        </div>
        <div class="squareItem">
          <span>产品完成数量</span>
          <span>{{ squareOption.productionWork }}</span>
        </div>
        <div class="squareItem">
          <span>产品合格率</span>
          <span>{{ squareOption.finishWork }}</span>
        </div>
      </div>
    </el-card>

    <!-- 横向柱状图产品产量统计 -->
    <el-card class="horizontalBarChart">
      <div ref="horizontalBarChart"></div>
    </el-card>

    <!-- 纵向柱状图产品合格率统计 -->
    <el-card class="verticalBarChart">
      <div ref="verticalBarChart"></div>
    </el-card>
  </div>
</template>

<script type="text/javascript">
export default {
  data() {
    return {
      // 指定图表的配置项和数据
      options: {
        title: {
          text: "32469",
          subtext: "评价数",
          left: "center",
          top: "43%",
          subtextStyle: {
            fontSize: 18,
          },
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          icon: "circle",
          top: "0",
          left: "right",
        },
        series: [
          {
            name: "咨询数量",
            type: "pie",
            radius: ["40%", "55%"],
            label: {
              show: true,
              padding: [0, -60],
              overflow: "none",
              fontSize: "15",
              fontWeight: "bold",
              formatter: "{d}%\n\n{c}",
            },
            labelLine: {
              show: true,
              length: 15,
              length2: 60,
            },
            itemStyle: {
              normal: {
                color: function (params) {
                  var colorList = ["#4FC3F7", "#00C853", "#F57F17"];
                  return colorList[params.dataIndex];
                },
              },
            },
            data: [
              { name: "好评", value: 1048 },
              { name: "一般", value: 735 },
              { name: "差评", value: 180 },
            ],
          },
        ],
      },
      //饼状图
      bingOption: {
        title: {
          text: "32469",
          subtext: "评价数",
          left: "center",
          top: "43%",
          subtextStyle: {
            fontSize: 18,
          },
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          icon: "circle",
          top: "0",
          left: "right",
        },
        series: [
          {
            name: "咨询数量",
            type: "pie",
            radius: ["40%", "55%"],
            label: {
              show: true,
              padding: [0, -60],
              overflow: "none",
              fontSize: "15",
              fontWeight: "bold",
              formatter: "{d}%\n\n{c}",
            },
            labelLine: {
              show: true,
              length: 15,
              length2: 60,
            },
            itemStyle: {
              normal: {
                color: function (params) {
                  var colorList = ["#4FC3F7", "#00C853", "#F57F17"];
                  return colorList[params.dataIndex];
                },
              },
            },
            data: [
              { name: "好评", value: 1048 },
              { name: "一般", value: 735 },
              { name: "差评", value: 180 },
            ],
          },
        ],
      },

      //折线图，柱状图，堆叠图-合格率分析
      verticalBarOption: {
        title: {
          text: "产品合格率统计",
        },
        // 提示框
        tooltip: {
          trigger: "axis",
        },
        grid: {
          left: "3%",
          right: "3%",
          bottom: "3%",
          containLabel: true,
        },
        // 工具栏
        toolbox: {
          feature: {
            saveAsImage: {
              type: "png",
            },
            magicType: {
              type: ["line", "bar", "stack"],
            },
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "产量",
            type: "line",
            smooth: true, // 平滑曲线显示
            data: [],
          },
        ],
      },

      //柱状图
      barOption: {
        title: {
          text: "异步数据加载示例",
        },

        tooltip: {},
        //图例
        legend: {
          data: ["销量"],
        },
        xAxis: {
          data: ["好评率", "差评率"],
        },
        yAxis: {},
        series: [
          {
            name: "销量",
            type: "bar",
            data: [
              { name: "好评", value: 1048 },
              { name: "差评", value: 1048 },
            ],
          },
        ],
      },

      //柱状图-产量分析
      horizontalBarOption: {
        title: {
          text: "各产品产量分析",
        },
        tooltip: {},
        legend: {
          data: ["产量"],
        },
        xAxis: {},
        yAxis: {
          type: "category",
          data: [],
          inverse: true,
        },
        series: [
          {
            name: "产量",
            type: "bar",
            data: [],
          },
        ],
      },

      //块图-今日工单情况
      squareOption: {
        productionWork: 0,
        finishWork: 0,
        finishCount: 0,
        finishRate: 0
      },

      chartsData: {
        production: {
          // 产品名称
          xAxis: [],
          series: [],
        },
      },
    };
  },
  methods: {
    init() {
      //加载饼状图
      // this.pieChart = this.$echarts.init(this.$refs.pieChart);
      // this.pieChart.setOption(this.bingOption);

      //加载横向柱状图---产品产量统计
      this.horizontalBarChart = this.$echarts.init(
        this.$refs.horizontalBarChart,
        null,
        { width: 400, height: 200 }
      );
      this.horizontalBarChart.setOption(this.horizontalBarOption);

      // //加载纵向柱状图---产品合格率统计
      this.verticalBarChart = this.$echarts.init(
        this.$refs.verticalBarChart,
        null,
        { width: 400, height: 200 }
      );
      this.verticalBarChart.setOption(this.verticalBarOption);
    },
    // 加载图表数据
    loadData() {
      this.$axios.get("/data").then((res) => {
        if (res.data.code == 200) {
          this.squareOption.productionWork = res.data.data.productionWork;
          this.squareOption.finishWork = res.data.data.finishWork;
          // 产品合格率数据
          var sum = 0;
          res.data.data.productInspection.forEach((element) => {
            this.verticalBarOption.xAxis.data.push(element.productName);
            this.verticalBarOption.series[0].data.push(
              element.inspectionResult
            );
            sum += element.inspectionResult;
          });
          // 产品合格率统计
          this.squareOption.finishRate = sum / this.verticalBarOption.series[0].data.length;

          // 产品产量数据
          res.data.data.workReporting.forEach((element) => {
            this.horizontalBarOption.yAxis.data.push(element.productName);
            this.horizontalBarOption.series[0].data.push(
              element.reportingQuantity
            );
            this.squareOption.finishCount += element.reportingQuantity;
          });

          this.init();
        }
      });
    },

    /**
     *
     * // 数据刷新
     *   setInterval(() => {
     *    this.pageUpdate();
     *   }, 3000);
     *
     *
     */
  },
  mounted() {
    this.loadData();
  },
};
</script>
<style>
.myChart {
  width: 800px;
  height: 400px;
  background-color: #ffffff;
  padding: 20px;
  border-radius: 20px;
}
.horizontalBarChart {
  float: left;
  width: 420px;
  height: 210px;
  background-color: #ffffff;
  padding: 20px;
  border-radius: 20px;
}
.verticalBarChart {
  float: left;
  width: 420px;
  height: 210px;
  background-color: #ffffff;
  padding: 20px;
  border-radius: 20px;
}

.squareChart {
  float: left;
  width: 280px;
  height: 210px;
  background-color: #ffffff;
  padding: 10px;
  border-radius: 10px;
}
.squareItem {
  float: left;
  margin: 5px;
  width: 90px;
  height: 50px;
  font-size: 20px;
  color: white;
  background-color: cornflowerblue;
  padding: 10px;
  border-radius: 10px;
}
</style>